<template v-loading="loading">
    <!--div>学者关注页</div-->
    <div>
        <div v-if="stars.length !== 0">
            <!--div class="input_box">
                <div class="input">
                    <el-input style="height: 40px;" v-model="cur_input" placeholder="请输入学者姓名" clearable />
                </div>
                <div class="button">
                    <el-button style="height: 40px;" type="primary" :icon="Search"
                        @click="sendStarScholarRequest">搜索</el-button>
                </div>
            </div-->
            <el-card>
                <el-table :data="stars" header-cell-class-name="table-header">
                    <el-table-column prop="display_name" label="学者姓名" />
                    <el-table-column prop="last_known_institution.display_name" label="学者所属组织" />
                    <el-table-column prop="star_time" label="关注时间"  />
                    <el-table-column prop="works_count" label="文献数量"/>
                    <el-table-column prop="cited_by_count" label="总被引数" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button type="primary" link @click="gotoScholar(scope.row)">跳转至学者主页</el-button>
                            <el-button type="warning" link @click="dele(scope.row)">取消关注</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </div>
        <div v-else style="margin-top: 200px;">
            <el-empty description="您现在没有关注的学者">
                <el-button link type="primary" @click="this.$router.push('/home')">前往首页</el-button>
            </el-empty>
        </div>
    </div>
    <el-pagination v-if="this.totalstars.length != 0" v-model:current-page="curpage" :page-size="10" :pager-count="11"
        layout="prev, pager, next" :total="this.totalstars.length" hide-on-single-page="true" background />
    <el-dialog v-model="dialogVisible" title="" width="30%" :before-close="handleClose">
        <span>您将取消关注{{ cur_star.name }}，是否继续？</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelOp">取消操作</el-button>
                <el-button type="primary" @click="continOp">
                    确定取消关注
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
// import { req_starInfoGet, req_starDel } from '@/api/index.js'
// import { response2ElMessage } from '@/utils/response-utils'
import { req_starScholarGet, req_starScholarRemove } from '/src/api'
import { response2ElMessage } from '/src/utils/response-utils.js'
export default {
    name: 'StarScholarView',
    props: {

    },
    data() {
        return {
            stars: [],
            totalstars: [],
            cur_star: '',
            dialogVisible: false,
            curpage: 1,
            cur_input: "",
            loading: true,
        }
    },
    methods: {
        async sendStarScholarRequest() {
            this.loading = true
            await req_starScholarGet().then((response) => {
                this.totalstars = response.data.result
                this.stars = this.totalstars.slice(0, 10)
                //this.star_total=this.stars.length
                this.loading = false
            })
        },
        dele(scope) {
            this.cur_star = scope;
            this.dialogVisibleChange()
        },
        cancelOp() {
            ElMessage.success("取消操作成功")
            this.dialogVisibleChange()
        },
        gotoScholar(row) {
            // this.$router.push('/scholar/' + row.id)
            const scholar_id = row.id;
            const route = this.$router.resolve({
            name: 'scholar', params: { scholar_id }
      });
      window.open(route.href, '_blank');
        },
        async continOp() {
            let response = await req_starScholarRemove(this.cur_star.id)
            this.dialogVisibleChange()
            let data = response.data
            if (data['errno'] === 1) ElMessage.success("取消关注成功")
            else ElMessage.error("取消关注失败！")
            this.sendStarScholarRequest()
        },
        dialogVisibleChange() {
            this.dialogVisible = !this.dialogVisible
        }
    },
    watch: {
        curpage(newVal, oldVal) {
            this.stars = this.stars.slice((newVal - 1) * 10, newVal * 10)
        }
    },
    created() {
        this.sendStarScholarRequest()
    },
    mounted() {

    }
}
</script>
<style scoped>
.input {
    width: 250px;
    height: 40px;
    display: inline-block;
    border-radius: 4px;
    margin-right: 7px;
    font-size: 15px;
}

.button {
    display: inline-block;
    height: 40px;
}

.input_box {
    margin-bottom: 5px;
}

.el-card {
    margin-bottom: 20px;
}

:deep(.el-table tr) {
    background-color: white;
    height: 60px;
}


:deep(.el-table) {
    width: 100%;
    font-size: 16px;
    background-color: white;
}
</style>
